import React, { Component } from 'react'
import './Index.less'

import home_y from '../../assets/img/home_y.jpeg'
import home_n from '../../assets/img/home_n.jpeg'

import cate_y from '../../assets/img/cate_y.jpeg'
import cate_n from '../../assets/img/cate_n.jpeg'

import mine_y from '../../assets/img/mine_y.jpeg'
import mine_n from '../../assets/img/mine_n.jpeg'

import shop_y from '../../assets/img/shop_y.jpeg'
import shop_n from '../../assets/img/shop_n.jpeg'

import { Switch,Route,NavLink } from 'react-router-dom'
import Home from '../Home/Home'
import Mine from '../Mine/Mine'
import Shop from '../Shop/Shop'
import Cate from '../Cate/Cate'

export default class Index extends Component {
    render() {
        let {location:{pathname}} = this.props;
        return (
            <div className="index">
                
                <Switch>
                    <Route path="/index/Home" component={Home}></Route>
                    <Route path="/index/Cate" component={Cate}></Route>
                    <Route path="/index/Shop" component={Shop}></Route>
                    <Route path="/index/Mine" component={Mine}></Route>
                </Switch>
                <footer>
                    <NavLink activeClassName="active" to="/index/Home">
                        <img src={pathname==='/index/Home'?home_y:home_n}/>
                        <div>首页</div>
                    </NavLink>

                    <NavLink activeClassName="active" to="/index/Cate">
                        <img src={pathname==='/index/Cate'?cate_y:cate_n} alt=""/>
                        <div>分类</div>
                    </NavLink>

                    <NavLink activeClassName="active" to="/index/Shop">
                        <img src={pathname==='/index/Shop'?shop_y:shop_n} alt=""/>
                        <div>购物车</div>
                    </NavLink>

                    <NavLink activeClassName="active" to="/index/Mine">
                        <img src={pathname==='/index/Mine'?mine_y:mine_n} alt=""/>
                        <div>我的</div>
                    </NavLink>
                </footer>
            </div>
        )
    }
}
